
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import config from '@/../config'
import { SetPointAPI } from '@/api'

export default class Map {
  constructor(id, latlng, zoom) {
    this.map = L.map(id, {
      center: latlng,
      zoom: zoom,
    })

    let tile = "https://tile.openstreetmap.org/{z}/{x}/{y}.png"
    let tile1 = "http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
    L.tileLayer(tile, {
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(this.map);

    L.control.scale({ imperial: false }).addTo(this.map);

    this.markers = {}

    this.add = null
    this.circle = null
    this.tooltip = null
  }
  reset() {
    this.markers = {}
  }
  icon(url) {
    return L.icon({ iconUrl: url, className: 'icon' })
  }
  marker(point) {
    if (this.markers[point.pid]) return
    let icon = this.icon(config.host + 'static/pointIcon/' + (point.icon || 'default.png'))
    let latlng = [point.latitude, point.longitude]
    let marker = L.marker(latlng, {
      icon: icon,
      title: point.name,
      shadowPane: 'shadowPane',
      draggable: true,
      autoPan: true
    })
    marker.on('dragend', (e) => {
      e.target._latlng
      let { data } = SetPointAPI({
        pid: point.pid,
        longitude: e.target._latlng.lng,
        latitude: e.target._latlng.lat,
      })
    })
    var popup = L.popup().setLatLng(latlng).setContent(`
    <div>name: ${point.name}</div>
    <div>detail: ${point.detail}</div>
    <div>latitude: ${point.latitude}</div>
    <div>longitude: ${point.longitude}</div>
    <div>direction: ${point.direction}</div>
    <div>uploader: ${point.uploader}</div>
    `)
    marker.bindPopup(popup).openPopup();
    marker.addTo(this.map);

    this.markers[point.pid] = { marker, point }
  }

  // Draw add point Sign
  addPoint(latlng) {
    if (this.add) {
      this.add.setLatLng(latlng)
    } else {
      let icon = this.icon(config.host + 'static/pointIcon/default.png')
      this.add = L.marker(latlng, { icon: icon, })
      this.add.addTo(this.map);
    }
  }
  // Draw markers ⚪ Range
  scan(latlng, radius) {
    if (this.circle) {
      this.circle.setLatLng(latlng)
      this.circle.setRadius(radius)
    } else {
      this.circle = L.circle(latlng, { radius: radius })
      this.circle.addTo(this.map);
    }
  }
  // Draw markers
  setCenter(latlng) {
    let txt = `
    <div>Set center point</div>
    <div>latitude: ${latlng.lat}</div>
    <div>longitude: ${latlng.lng}</div>
    `
    if (this.tooltip) {
      this.tooltip.setLatLng(latlng)
      this.tooltip.setContent(txt)
    } else {
      this.tooltip = L.tooltip(latlng, { permanent: true, sticky: true }).setContent(txt)
      this.tooltip.addTo(this.map)
    }
  }
  // cancel Draw
  cancel() {
    if (this.circle) this.map.removeLayer(this.circle)
    if (this.add) this.map.removeLayer(this.add)
    if (this.tooltip) this.map.removeLayer(this.tooltip)

    this.circle = null
    this.add = null
    this.tooltip = null
    this.off('mousemove')
    this.off('click')
  }

  async onclick(fn) {
    this.map.on('click', await fn);
  }

  async onmousemove(fn) {
    this.map.on('mousemove', await fn);
  }
  async off(type) {
    this.map.off(type)
  }
}